<template>
	<a-layout class="layout">
		<a-layout-header>
			<div class="logo" />
			<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="horizontal" :style="{ lineHeight: '64px' }">
				<a-menu-item key="1">TGraph数据库测试对比管理平台</a-menu-item>
				<!-- <a-menu-item key="2">结果集</a-menu-item> -->
			</a-menu>
		</a-layout-header>

		<a-layout-content style="padding: 0 50px">
			<a-breadcrumb style="margin: 16px 0">
				<a-breadcrumb-item>说明</a-breadcrumb-item>
                <a-breadcrumb-item>数据库.后数字为时态数据量</a-breadcrumb-item>
				<a-breadcrumb-item>淡绿色为构建数据库（即空间测试），淡红色为对数据库进行了写入的测试</a-breadcrumb-item>
				<a-breadcrumb-item>亮绿色背景的是正在进行中的测试</a-breadcrumb-item>
			</a-breadcrumb>

			<!-- <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
        Content
      </div> -->
			<!-- <a-radio-group v-model:value="value3" size="small">
				<a-radio-button value="a">测试个数</a-radio-button>
				<a-radio-button value="b">正确case个数</a-radio-button>
				<a-radio-button value="c">性能结果</a-radio-button>
			</a-radio-group> -->
			<!-- <result-panel :style="{ minHeight: '600px', width: '100%'}"></result-panel> -->
			<info-panel :style="{ minHeight: '600px', width: '100%'}"></info-panel>
		</a-layout-content>

		<a-layout-footer style="text-align: center">
			TGraph (2016~2022) System Test (mantained by Sjh)
		</a-layout-footer>
	</a-layout>
</template>

<script>
	/* eslint-disable */
	import {
		defineComponent,
		ref
	} from "vue";
    import { notification } from 'ant-design-vue';
	import ResultPanel from './components/ResultPanel.vue'
	import InfoPanel from './components/InfoPanel.vue'
	
	export default defineComponent({
		components: {
			ResultPanel,InfoPanel
		},
		setup() {
			return {
				selectedKeys: ref(["2"]),
				value3: 'a'
			};
		},
		async created() {
			await this.$store.dispatch('initialAll')
		},
        mounted(){
            notification['info']({
                message: '注意',
                description: '初始化加载需要较长时间（约30秒到1分钟）请耐心等待',
                duration: 0,
            });
        },
        computed:{
            close(){
                let res = this.$store.state.jenkins_test.length
                if(res>0){
                    console.log('complete jenkins request', res)
                    notification.close()
                }
                return res
            }
        }
	});
</script>

<style>
	.site-layout-content {
		min-height: 280px;
		padding: 24px;
		background: #fff;
	}

	#components-layout-demo-top .logo {
		float: left;
		width: 120px;
		height: 31px;
		margin: 16px 24px 16px 0;
		background: rgba(255, 255, 255, 0.3);
	}

	.ant-row-rtl #components-layout-demo-top .logo {
		float: right;
		margin: 16px 0 16px 24px;
	}

	[data-theme="dark"] .site-layout-content {
		background: #141414;
	}
</style>
